<template>
    <div class="drug_firms">
        <div class="search">
            <div class="left">
                <!-- 药企 -->
                <div class="search_list">
                    <span class="search_text">药企名称：</span>
                    <el-input size="small" placeholder="输入" v-model="drug_firms_name"></el-input>
                </div>
            </div>
            <div class="center"></div>
            <div class="right"></div>
        </div>
        <!--列表-->
        <div class="list">
            <div class="list_head_button">
                <div class="search_button">
                    <el-button size="mini" type="warning" plain @click="dialogVisibleAdd = true">新增</el-button>
                </div>
                <div class="search_name">
                    <el-button size="mini" type="primary" @click="search_list">查询</el-button>
                    <el-button size="mini" @click="reset_list">重置</el-button>
                </div>
            </div>
            <el-table
                :header-cell-style="{background:'#F6F7FB',color:'#666666',height: '50px'}"
                :row-class-name="tableRowClassName"
                :data="drugList">
                <el-table-column
                    prop="id"
                    label="药企ID"
                    min-width="25">
                </el-table-column>
                <el-table-column
                    prop="enterpriseName"
                    label="药企名称"
                    min-width="45">
                </el-table-column>
                <el-table-column
                    prop="memo"
                    show-overflow-tooltip
                    label="备注"
                    min-width="70">
                </el-table-column>
                <el-table-column
                    label="操作"
                    min-width="16">
                    <template slot-scope="scope">
                        <el-tooltip popper-class="operation_button_promit" effect="dark" content="编辑" placement="bottom">
                            <el-button type="text" @click="edit_drug_info(scope.row)">
                                <img src="../../assets/common/edit.svg" alt="">
                            </el-button>
                        </el-tooltip>
                        <el-tooltip popper-class="operation_button_promit" effect="dark" content="删除" placement="bottom">
                            <el-button type="text" @click="deleteDrug(scope.row)">
                                <img src="../../assets/common/delete.svg" alt="">
                            </el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <pagination :page="page" @changeCurrentPage="handleCurrentChange" @changePageSize="handlePageSize"/>
        </div>
        <!--添加药企-->
        <el-dialog
        title="添加药企"
        :visible.sync="dialogVisibleAdd"
        width="526px"
        class="label_dialog"
        :before-close="closeAddDialog">
            <div>
                <div class="search_list">
                    <span class="mandatory_logo">*</span>
                    <span class="search_text">药企名称：</span>
                    <el-input
                        size="small" 
                        v-model="add_drug_firms_name" 
                        placeholder="请输入药企名称">
                    </el-input>
                </div>
                <div class="search_list remark">
                    <span class="search_text" style="transform: translateY(-33px);">备注：</span>
                    <el-input
                        type="textarea"
                        size="small" 
                        v-model="add_remark" 
                        placeholder="请输入备注"
                        maxlength="200"
                        show-word-limit>
                    </el-input>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelAddDialog">取消</el-button>
                <el-button type="primary" @click="add_drugs">确定</el-button>
            </span>
        </el-dialog>
        <!-- 编辑药企 -->
        <el-dialog
        title="编辑药企"
        :visible.sync="dialogVisibleEdit"
        width="526px"
        class="label_dialog"
        :before-close="closeEditDialog">
            <div>
                <div class="search_list">
                    <span class="mandatory_logo">*</span>
                    <span class="search_text">药企名称：</span>
                    <el-input
                        size="small" 
                        v-model="edit_drug_firms_name" 
                        placeholder="请输入药企名称">
                    </el-input>
                </div>
                <div class="search_list remark">
                    <span class="search_text" style="transform: translateY(-33px);">备注：</span>
                    <el-input
                        type="textarea"
                        size="small" 
                        v-model="edit_remark" 
                        placeholder="请输入备注"
                        maxlength="200"
                        show-word-limit>
                    </el-input>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelEditDialog">取消</el-button>
                <el-button type="primary" @click="edit_drugs">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import { api, baseAjax } from '@/api/api';
    import pagination from '../public/pagination';
    import {statusCode} from '../../utils/index';
    export default {
        name: "pharmaceuticalEnterpriseManagement",
        components:{
            pagination
        },
        data() {
            return {
                //分页
                page: {
                    currentPage: 1,    //当前页
                    pageSize: 10,    //每页显示条数
                    totalPage: 0,   //总页数
                    total:null   //总条数
                },
                dialogVisibleAdd:false,  //添加药企弹框
                dialogVisibleEdit:false,   //编辑药企弹框
                drug_firms_name:'',  //药企名称
                drugList:[],   //药企列表
                add_drug_firms_name:'',  //添加药企名称
                add_remark:'',  //添加备注
                edit_drug_firms_name:'',  //编辑药企名称
                edit_remark:'',    //编辑备注
                enterprise_id:null   //药企id
            }
        },
        mounted(){
            this.getDrugList();//列表数据
        },
        methods: {
            //修改列表tr颜色
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                return 'success_row';
                }
                return '';
            },
            //改变当前页码
            handleCurrentChange(currentPage) {
                this.page.currentPage = currentPage;
                this.getDrugList();
            },
            //改变每页条数
            handlePageSize(pageSize){
                this.page.pageSize = pageSize;
                this.getDrugList();
            },
            //添加药企
            add_drugs(){
                let that = this;
                if(!this.add_drug_firms_name){
                    this.$alert('请填写"药企名称"');
                }else if(this.add_drug_firms_name.length > 20){
                    this.$alert('药企名称不能大于20个字');
                }else{
                    let data = {
                        enterpriseName:this.add_drug_firms_name,
                        memo:this.add_remark
                    };
                    baseAjax(api.add_enterprise, data, (res)=>{
                        if(res.code === statusCode.success){
                            if(res.data == true){
                                that.$message.success('添加成功');
                                that.dialogVisibleAdd = false;
                                that.add_drug_firms_name = '';
                                that.add_remark = '';
                                that.getDrugList();
                            }else{
                                that.$message.error('添加失败');
                            }
                        }
                    });
                }
            },
            //取消添加弹框
            cancelAddDialog(){
                this.dialogVisibleAdd = false;
                this.add_drug_firms_name = '';
                this.add_remark = '';
            },
            //关闭添加弹框
            closeAddDialog(done){
                this.add_drug_firms_name = '';
                this.add_remark = '';
                done();
            },
            //编辑药企获取信息
            edit_drug_info(info){
                this.dialogVisibleEdit = true;
                this.edit_drug_firms_name = info.enterpriseName;
                this.edit_remark = info.memo;
                this.enterprise_id = info.id;
            },
            //编辑药企
            edit_drugs(){
                let that = this;
                if(!this.edit_drug_firms_name){
                    this.$alert('请填写"药企名称"');
                }else if(this.edit_drug_firms_name.length > 20){
                    this.$alert('药企名称不能大于20个字');
                }else{
                    let data = {
                        id:this.enterprise_id,
                        enterpriseName:this.edit_drug_firms_name,
                        memo:this.edit_remark
                    };
                    baseAjax(api.update_enterprise, data, (res)=>{
                        if(res.code === statusCode.success){
                            if(res.data == true){
                                that.$message.success('编辑成功');
                                that.dialogVisibleEdit = false;
                                that.edit_drug_firms_name = '',
                                that.edit_remark = '';
                                that.enterprise_id = null;
                                that.getDrugList();
                            }else{
                                that.$message.error('编辑失败');
                            }
                        }
                    });
                }
            },
            //取消编辑弹框
            cancelEditDialog(){
                this.dialogVisibleEdit = false;
                this.edit_drug_firms_name = '',
                this.edit_remark = '';
                this.enterprise_id = null;
            },
            //关闭编辑弹框
            closeEditDialog(done){
                this.edit_drug_firms_name = '',
                this.edit_remark = '';
                this.enterprise_id = null;
                done();
            },
            //删除药企
            deleteDrug(info){
                let that = this;
                this.$confirm('删除后不可恢复，是否确认删除?', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    api.delete_enterprise = {
                        url:api.delete_enterprise_url+'?enterpriseId='+info.id,
                        method:api.delete_enterprise.method
                    };
                    baseAjax(api.delete_enterprise, '', (res)=>{
                        if(res.code === statusCode.success){
                            if(res.data == true){
                                that.$message.success('删除成功');
                                that.getDrugList();
                            }else{
                                that.$message.error('药企下有项目，无法删除');
                            }
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
            //列表数据
            getDrugList(){
                let that = this;
                api.get_enterprise_list = {
                    url:api.get_enterprise_list_url+'?currentPage='+this.page.currentPage+'&totalPage='+this.page.totalPage+'&pageSize='+this.page.pageSize+'&enterpriseName='+this.drug_firms_name,
                    method:api.get_enterprise_list.method
                };
                baseAjax(api.get_enterprise_list, '', (res)=>{
                    if(res.code === statusCode.success){
                        let {pageSize,totalPage,enterpriseListValue,count} = res.data;
                        that.page.pageSize = pageSize;
                        that.page.totalPage = totalPage;
                        that.page.total = count;
                        that.drugList = enterpriseListValue;
                    }
                });
            },
            //查询
            search_list(){
                this.handleCurrentChange(1);
            },
            //重置
            reset_list(){
                this.drug_firms_name = '';
            }
        }
    }
</script>

<style lang="less" scoped>
.drug_firms{
    font-family: PingFangSC-Regular, PingFang SC;
    .search{
        .left,.center{
            margin-right:24px;
        }
    }

    /deep/.el-dialog {
        .el-textarea{
            width: 310px;
            .el-textarea__inner{
                height: 100px;
                resize: none;
                border-radius: 2px;
                border: 1px solid #DDDFE6;
            }
        }
        .remark{
            padding-left:10px;
        }
    }

    i {
      font-size: 20px;
    }
}
</style>
